<template>
  <div class="container-bg">
    <div class="qrcode-box ">
      <img src="@/assets/sharebg.jpg">
   

      <!-- <div class="text-center text-subtitle-1 px-8 mt-10">{{ $t("$ETHPainPoints") }}</div> -->
      <div class="qrocde-bg py-8 ">
        <div class="qrocde-bg">
          <img src="@/assets/logo.png">
          <div class="sub-title title-temp">vt_markets</div>
        </div>
      </div>
      <div class="container box-bg p-6">
        <div class="width:30%">
          <!-- <canvas id="QRCode"></canvas> -->
          <img :src="qrcode" class="img" alt="" />
        </div>
        <div class="right">
          <div class="url" v-clipboard:copy="url" v-clipboard:success="onClipboard">
            Scan the QR code to openimmediately
          </div>
          <div>{{ url }}</div>
          <div class="primary-btn " v-clipboard:copy="url" v-clipboard:success="onClipboard"
            @click="onClickShowBetDialog(-1)">
            {{ $t("copyLink") }}
          </div>
        </div>

      </div>

    </div>
    <div class="borders">
      <div class="header">
        <div style="padding: 0;" class="white--text text-center item">{{ $t("dz") }}</div>
        <div style="padding: 0;" class="white--text text-center item">{{ $t("zcsj") }}</div>
        <div style="padding: 0;" class="white--text text-center item">{{ $t("level") }}</div>
        <div style="padding: 0;" class="white--text text-center item">{{ $t("tgje") }}</div>
        <div style="padding: 0;" class="white--text text-center item">{{ $t("jyls") }}</div>
      </div>
      <div>
        <div class="badylist" v-for="(item, i) of dictTeam" :key="i">
              <div  class="text-center grey--text item" >{{ formatAddressV(item.address) }}</div>
              <div  class="text-center grey--text item" >{{timestampToDate(item.createAt*1000)}}</div>
              <div  class="text-center grey--text item" >{{levelMath(item.level)}}</div>
              <div  class="text-center grey--text item" >{{item.buy||0}}</div>
              <div  class="text-center grey--text item" >{{ item.bet || 0}}</div>
            </div>
      </div>
    </div>

    <div style="height: 80px;"></div>
    <!-- <Loading :show="true"></Loading> -->
  </div>
</template>

<script>
import QrCode from 'qrcode'
import i18n from '@/i18/index';
import { showToast } from 'vant';
import { userStore } from '@/stores/modules/user';
import { shareUserTeam } from '@/api/api';
import { formatAddress } from "@/api/kit";
export default {
  
  data: () => ({
   
    dialog: "RECHARGE",
    dialogLoading: false,
    loading: false,
    usdtInput: "",
    snackbar: false,
    snackbarMsg: "",
    qrcode: "",
    stat: {},
    user: {},
    agent: [{ value: 0 }, { value: 0 }, { value: 0 }],
    url: "",
    dictTeam:[],
    rechargeInput: null,
    showPagination: true,
    loadingMore: false,
    list: [],
    listForm: {
      page: 0,
      size: 50,
    },
    bonusRecords: [
      { dict: "5", diff: "5%", amount: "1000U", level: "金星", bonus: "10%", guess: "0" },
      { dict: "5", diff: "5%", amount: "3000U", level: "木星", bonus: "20%", guess: "0" },
      { dict: "5", diff: "5%", amount: "10000U", level: "水星", bonus: "30%", guess: "1%" },
      { dict: "5", diff: "5%", amount: "100000U", level: "火星", bonus: "40%", guess: "2%" },
      { dict: "5", diff: "5%", amount: "500000U", level: "土星", bonus: "50%", guess: "3%" },
    ],
    config: {
      title: i18n.global.t("nav_promotion"),
      api: '/api/user/community',
      dataPath: 'data',
      listHeader: [
        { value: "level", handle: (value) => (value) },
        { value: "item1", handle: (value) => `${value}` },
        { value: "item2", handle: (value) => value },
        { value: "item3", handle: (value) => value },
        { value: "item4", handle: (value) => value },
      ],
    },

    tableData: [{
      level: "IB",
      item1: "3w $",
      item2: "10w $",
      item3: "10%",
      item4: "0.5%",
    }, {
      level: "MIB",
      item1: "30w $",
      item2: "100w $",
      item3: "20% ",
      item4: "1%",
    }, {
      level: "PIB",
      item1: "300w $",
      item2: "1000w $",
      item3: "30% ",
      item4: "1.5%",
    },]
  }),
  computed: {
    getQrcodeUrl() {
      return this.url;
    },
    getCurrentPage() {
      return this.config
    },
  },
  mounted() {

    this.init();

  },
  methods: {
    formatAddressV(e){
     return formatAddress(e)
    },
    onClickShowBetDialog() {
     
      try {
        const text = this.url
        // 添加一个input元素放置需要的文本内容
        const input = document.createElement('input')
        input.value = text
        document.body.appendChild(input)
        // 选中并复制文本到剪切板
        input.select()
        document.execCommand('copy')
        // 移除input元素
        document.body.removeChild(input)
        showToast('已复制到剪切板')

      } catch (error) {
        console.log(error)
        showToast('复制失败');
      }
    },
    timestampToDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
},
    async init() {
      var info = userStore()
      this.url = window.location.origin + "?code=" + info.address;
      await this.getQrCode()

      await this.getUserDictInfo();

    },
    async getQrCode() {
      const opts = {
        errorCorrectionLevel: 'L',
        type: 'image/png',
        quality: 0.3,
        margin: 2,
        width: 250,
        height: 250,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      }
      QrCode.toDataURL(this.url, opts, (err, url) => {
        this.qrcode = url

      })
    },
    async getUserDictInfo() {
      await shareUserTeam().then((res)=>{
        if(res && res.code==-1){
          showToast(res.message)
        return
        }
        if(res){
        this.dictTeam = Object.entries(res).map(([key, value]) => ({ address: key, ...value }));
        
        }
      })
    },
    onClipboard() {
      this.snackbar = true;
      this.snackbarMsg = i18n.global.t("$copy_tip");
    },
   levelMath (e){
    if (e) {
        switch (e) {
            case 1:
            return i18n.global.t('pt')
            case 2:
            return 'IB'
            case 3:
            return 'MIB'
            case 4:
            return 'PIB'
            case 5:
            return i18n.global.t('dl')
            default:
              return '-'
          
        }
    }
}
  },
};
</script>
<style lang="scss" scoped>
.container-bg {
  height: 100vh;
  overflow: auto;
}

.container {
  display: flex;
  border: 1px solid #cfc1c129;
  margin: 10px;
  padding: 10px;
  width: 100%;

  .right {
    width: 70%;
    word-wrap: break-word;

    .primary-btn {
      width: 95%;
      color: var(--tradeGL);
      font-size: 14px;
      text-align: center;
      padding: 8px;
      background: linear-gradient(45deg, #39a9ed, #0e35ff);
      border-radius: 5px;
      margin-top: 10px;
    }
  }

  .img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin: 10px;
  }
}

.qrcode-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  // background: url('~assets/image/qrcode_bg.jpeg') no-repeat center center;
  //   background-size: 100% 100%;
  //   height: calc(100vh - 142px);
  //   width: 100%;
  border-radius: 4px;
  //border: 3px solid var(--v-yellow-dark-lighten1);
  position: relative;
  // height: calc(100vh - 50px - 24px);
  img{
    background-repeat: no-repeat;
    background-size:cover;
    width:100%;
    height: 100%;
  }
  .qrocde-bg {
    display: flex;
    width: 100%;
    gap: 10px;
    background-color: #fff;
    justify-content: center;
    align-items: center;

    img {
      width: 40px;
    }

    .title-temp {
      font-size: 30px;
    }
  }

  .q-title {
    font-size: 26px;
    color: #ffffff;
  }

  .qrcode {
    //padding: 20px;
    // background-color: #000;
    display: inline-block;
    width: 100%;

    >img {
      width: 100%;
      display: block;
    }
  }

  .sub-tip {
    color: #fff;
    font-size: 16px;
  }

  .url {
    border-radius: 25px;
    //width: 80%;
    line-height: 25px;
    position: relative;

    .text {
      color: #fff;
      font-size: 12px;
      line-height: 18px;
      //width: 85%;
      word-break: break-all;
      //padding-left: 15px;
      //white-space: nowrap;
      //text-overflow: ellipsis;
      //overflow: hidden;
    }


  }


}

.borders {
  border: 1px solid #cfc1c129;
  margin: 10px;
  padding: 10px;
}

.tscenter {
  // text-align: center;
  padding-bottom: 10px;
  color: var(--tradeGL);
}

.header {
  display: flex;
  font-size: 12px;
  color: var(--tradeGL);
  margin-bottom: 30px;
  margin-top: 10px;

  .item {
    width: 25%;
    text-align: center;
  }
}

.badylist {
  display: flex;
  font-size: 12px;

  .item {
    width: 25%;
    text-align: center;
    margin-bottom: 30px;
  }
}
</style>